<!--
  _______
 |__   __|
    | |  ___  _ __ __      __ ___  _ __
    | | / _ \| '__|\ \ /\ / // _ \| '__|
    | ||  __/| |    \ V  V /|  __/| |
    |_| \___||_|     \_/\_/  \___||_|
-->
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:include="themes/default/include/header::commonHeaderCustom('随笔' + ' - ' + ${siteConfig.webname},~{::style})">
    <style type="text/css">
        .read-more a {
            color: #1E9FFF;
        }
        .load-more {
            color: #FFB800;
        }
        .like em {
            font-style: normal;
            font-size: 12px;
        }
    </style>
</head>
<body>
<!-- 头部开始 -->
<link rel="stylesheet"  type="text/css" th:href="@{/blog/templates/themes/default/css/essay.css}"/>
<header th:include="themes/default/include/header::commonHeaderContent"></header>

<!-- 正文开始 -->
<div class="lay-blog">
    <div class="container-wrap">
    <div class="container container-message">
        <div class="contar-wrap" id="contar-wrap">
            <form class="layui-form" action="">
                <div class="layui-form-item layui-form-text">
                    <textarea class="layui-textarea" id="LAY-msg-content" style="resize:none"></textarea>
                </div>
            </form>
            <div class="item-btn">
                <button class="layui-btn layui-btn-normal" id="item-btn">提交</button>
            </div>

            <div id="LAY-msg-box">
                <div class="info-box" v-cloak>
                    <div class="info-item" v-for="timeline in timelines">
                        <img class="info-img" src="https://tvax1.sinaimg.cn/crop.0.0.540.540.180/0075uTFdly8fs75paasl1j30f00f0afd.jpg" alt="">
                        <div class="info-text">
                            <h4>{{ timeline.title }}</h4>
                            <p class="title count">
                                <span class="name">倚楼听雨</span>
                                <span class="info-img like" v-bind:alt="timeline.key"><i class="layui-icon layui-icon-praise"></i><em>{{ timeline.praise }}</em></span>
                            </p>
                            <p class="info-intr" v-html="timeline.content">
                            </p>
                            <p class="read-more">
                                <span v-if="timeline.content.indexOf('...') >= 0">
                                    <a v-bind:href="blogPath + 'post/' + timeline.key + '.html'" target="_blank">阅读全文</a>
                                </span>
                            </p>
                        </div>
                    </div>
                    <div class="load-more text-center">
                        <p></p>
                        <p></p>
                        <p v-text="tips">加载更多</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<!-- 底部开始 -->
<footer th:include="themes/default/include/footer::commonFooterCustom(~{::script})">
    <script type="text/javascript">
        layui.config({base: BUGUCMS_BASE_URL + 'static/lib/'}).extend({
            conf: 'bugucms/conf'
        }).use(['conf', 'layer', 'element', 'form', 'jquery', 'laytpl'], function () {
            var $ = layui.jquery,
                conf = layui.conf,
                layer = layui.layer,
                form = layui.form,
                laytpl = layui.laytpl;
            var currentPage = 1;
            if (conf.debug) {
                console.log("client config:" + JSON.stringify(conf));
            }
            var app = new Vue({
                el: '#LAY-msg-box',
                data: {
                    timelines: [
                        // {key: '20180823100000', year: '2018', title: 'Hello content1!', content: 'content1'}
                    ],
                    tips: '努力加载中...',
                    blogPath: ''
                },
                created: function () {
                    this.tips = "加载更多";
                    this.blogPath = BLOG_BASE_URL;
                    getData();
                },
                mounted: function () {
                    // 添加滚动事件，检测滚动到页面底部
                    window.addEventListener('scroll', this.scrollBottom)
                },
                // 在methods对象中定义方法
                methods: {
                    scrollBottom:function (event) {
                        //鼠标滚动到页面最底部加载数据
                        var documentHeight = [0];
                        if ($(document).scrollTop() + $(window).height() > $(document).height() - 1) {
                            documentHeight.push($(document).height());
                            if (documentHeight[documentHeight.length - 1] > documentHeight[documentHeight.length - 2]) {
                                documentHeight[documentHeight.length - 2] = documentHeight[documentHeight.length - 2] + documentHeight[documentHeight.length - 1];
                                this.tips = '努力加载中...';
                                getData();
                                console.log("next data" + currentPage);
                            }
                        }
                    }
                }
            });
            $(function () {
                // 发布随笔
                $('#item-btn').on('click', function () {
                    var elemCont = $('#LAY-msg-content')
                        , content = elemCont.val();
                    if (content.replace(/\s/g, '') == "") {
                        layer.msg('先写点随笔再提交吧');
                        return elemCont.focus();
                    }
                    console.log(JSON.stringify(conf.request));
                    var essayNewUrl = BLOG_API_BASE_URL + 'post/new';//数据接口地址
                    // 如果开启token，传入token
                    if (conf.request.tokenName) {
                        essayNewUrl += '?tokenString=' + conf.request.tokenString;
                    }
                    console.log("essayNewUrl:" + essayNewUrl);
                    $.post(essayNewUrl, {
                        postType: "essay",
                        postContent: content
                    }, function (res) {
                        if (res.status === 0) {
                            layer.msg(res.msg, {icon: 2});
                        } else {
                            var postId = JSON.stringify(res.data.postId);
                            console.log("postId:" + postId);
                            if (postId > 0) {
                                var view = $('#LAY-msg-tpl').html(), data = {
                                    username: '倚楼听雨',
                                    avatar: window.BLOG_THEME_PATH + 'images/avatar/default.png',
                                    praise: 0,
                                    postId: postId,
                                    content: content
                                };
                                // 点赞
                                $('#LAY-msg-tpl').on('click', "span.like", function () {
                                    doGood(this);
                                });
                                //模板渲染
                                laytpl(view).render(data, function (html) {
                                    $('#LAY-msg-box').prepend(html);
                                    elemCont.val('');
                                });
                                layer.msg('随笔发布成功', {
                                    icon: 6,
                                    time: 1000
                                });
                            } else {
                                layer.msg('随笔发布失败', {icon: 2});
                            }
                        }
                    });
                })
                // 点赞
                $('#LAY-msg-box').on('click', "span.like", function () {
                    doGood(this);
                });
            });
            function doGood(obj) {
                console.log(JSON.stringify(conf.request));
                if (!($(obj).hasClass("layblog-this"))) {
                    var postId = $(obj).attr("alt");
                    var goodCount = parseInt($(obj).find("em").text()) + 1;
                    $(obj).find("em").text('已赞');
                    $(obj).addClass('layblog-this');
                    $.tipsBox({
                        obj: $(obj),
                        str: "+1",
                        callback: function () {
                            var essayLikeUrl = BLOG_API_BASE_URL + 'post/meta/' + postId;//数据接口地址
                            // 如果开启token，传入token
                            if (conf.request.tokenName) {
                                essayLikeUrl += '?tokenString=' + conf.request.tokenString;
                            }
                            console.log("essayLikeUrl:" + essayLikeUrl);
                            $.post(essayLikeUrl, {
                                metaKey: "praise_count",
                                metaValue: goodCount
                            }, function (res) {
                                if (res.status === 0) {
                                    layer.msg(res.msg, {icon: 2});
                                } else {
                                    // layer.msg('点赞成功', {icon: 1});
                                    niceIn($(obj));
                                    layer.msg('点赞成功', {
                                        icon: 6,
                                        time: 1000
                                    })
                                }
                            });
                        }
                    });
                }
            }
            //start 评论的特效
            (function ($) {
                $.extend({
                    tipsBox: function (options) {
                        options = $.extend({
                            obj: null,  //jq对象，要在那个html标签上显示
                            str: "+1",  //字符串，要显示的内容;也可以传一段html，如: "<b style='font-family:Microsoft YaHei;'>+1</b>"
                            startSize: "12px",  //动画开始的文字大小
                            endSize: "30px",    //动画结束的文字大小
                            interval: 600,  //动画时间间隔
                            color: "red",    //文字颜色
                            callback: function () {
                            }    //回调函数
                        }, options);
                        $("body").append("<span class='num'>" + options.str + "</span>");
                        var box = $(".num");
                        var left = options.obj.offset().left + options.obj.width() / 2;
                        var top = options.obj.offset().top - 10;
                        box.css({
                            "position": "absolute",
                            "left": left + "px",
                            "top": top + "px",
                            "z-index": 9999,
                            "font-size": options.startSize,
                            "line-height": options.endSize,
                            "color": options.color
                        });
                        box.animate({
                            "font-size": options.endSize,
                            "opacity": "0",
                            "top": top - parseInt(options.endSize) + "px"
                        }, options.interval, function () {
                            box.remove();
                            options.callback();
                        });
                    }
                });
            })($);
            function niceIn(prop) {
                prop.find('i').addClass('niceIn');
                setTimeout(function () {
                    prop.find('i').removeClass('niceIn');
                }, 1000);
            }
            function getData() {
                var index = layer.load(2, {
                    shade: [0.6, '#fff'], content: '加载中...', time: 500, success: function (layero) {
                        layero.find('.layui-layer-content').css({
                            'padding-top': '6px',
                            'width': '150px',
                            'padding-left': '40px'
                        });
                        layero.find('.layui-layer-ico16, .layui-layer-loading .layui-layer-loading2').css({
                            'width': '150px !important',
                            'background-position': '2px 0 !important'
                        });
                    }
                });
                var essayListUrl = BLOG_API_BASE_URL + 'post/essay';//数据接口地址
                // 如果开启token，传入token
                if (conf.request.tokenName) {
                    essayListUrl += '?tokenString=' + conf.request.tokenString;
                }
                console.log("essayListUrl:" + essayListUrl);
                $.post(essayListUrl, {page: currentPage}, function (res) {
                    if (res.status === 0) {
                        layer.msg(res.msg, {icon: 2});
                    } else {
                        console.log("timelines:" + JSON.stringify(res.data.timelines));
                        if (res.data.timelines.length === 0) {
                            app.tips = '加载完成';
                        } else {
                            ++currentPage;
                        }
                        for (var idx in res.data.timelines) {
                            var timeline = res.data.timelines[idx];
                            app.timelines.push(timeline);
                        }
                    }
                });
            }
        });
    </script>

    <script id="LAY-msg-tpl" type="text/html">
        <div class="info-box">
            <div class="info-item">
                <img class="info-img" src="{{ d.avatar }}" alt="">
                <div class="info-text">
                    <p class="title count">
                        <span class="name">{{ d.username }}</span>
                        <span class="info-img like" alt="{{ d.postId }}">
					  	<i class="layui-icon layui-icon-praise"></i>
                        <em>{{ d.praise }}</em>
					 	</span>
                    </p>
                    <p class="info-intr">
                        {{ d.content }}
                    </p>
                </div>
            </div>
        </div>
    </script>
</footer>
</body>
</html>